<template>
  <!--电台分类-->
  <div class="policy">
    <el-card class="box-card" style="margin-top: 35px;border-radius: 20px;">
      <div class="policy-header">
        <div  style="display: flex;align-items: center">
          <h2>电台分类</h2>
          <el-button @click="add" icon="el-icon-plus" style="margin-left: 20px;background: #699FF3;color: #fff;border-radius: 10px"></el-button>
        </div>

<!--        <div class="search-box" style="display: flex;align-items: center">-->
<!--          <el-form :inline="true" class="demo-form-inline" style="display: flex;align-items: center">-->
<!--            <el-form-item style="font-size:12px;margin-right:30px;margin-bottom: 0">-->
<!--              <el-input v-model="form.classificationName" placeholder="请输入分类名称" clearable @clear="getList" prefix-icon="el-icon-search"/>-->
<!--            </el-form-item>-->
<!--            <el-form-item style="display: flex;align-items: center;margin-bottom: 0">-->
<!--              <el-button style="background: #699FF3;color: #fff;border-radius: 24px;margin-bottom: 0" @click="search">查询</el-button>-->
<!--            </el-form-item>-->
<!--          </el-form>-->
<!--        </div>-->
      </div>
      <!--       列表-->
      <div class="list">
        <el-table
          :data="tableData"
          style="width: 100%"
          :header-cell-style="{background:'#F4F4F4',border:'none'}"
        >

          <el-table-column
            prop="name"
            label="分类名称"
            align="center"
          />
          <el-table-column
            prop="sequence"
            label="排序"
            align="center"
          />
          <el-table-column
            prop="scales_count"
            label="包含音乐（首）"
            align="center"
          />

          <el-table-column label="操作" width="180" align="center">
            <template slot-scope="scope">
              <el-button type="text" size="small" icon="el-icon-edit" style="color: #409EFF;" @click="edit(scope.row)">编辑</el-button>
              <el-button type="text" size="small" icon="el-icon-delete" style="color: #F56C6C;" @click="del(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="paging-device">
        <Pagingdevice
          ref="paging"
          :total-count="totalCount"
          :current_page="current_page"
          :per_page="per_page"
          @select="select"
          @changep="changep"
        />
      </div>
    </el-card>

    <Addclass v-if="isShow" @closeAlert="closeAlert" :state="state" :item="item"></Addclass>
  </div>
</template>

<script>
// import {categoryList,categoryDel,imgURL} from "@/api"

import Pagingdevice from '@/components/Pagingdevice'
import Addclass from './components/addClass'
export default {
  name: "musicClassification",
  components: {
    Pagingdevice,
    Addclass
  },
  data() {
    return {
      state: 'add',
      item:{},
      isShow: false,
      imgURL,
      form:{
        classificationName:'',
      },
      tableData:[],
      totalCount: 0,
      current_page: 1,
      per_page:15,
    };
  },
  mounted() {
    this.getList()
    // 按钮权限判断
    // setTimeout(()=> {
    //   this.getBtns()
    //
    // },500)
  },
  methods: {
    // 按钮权限
    getBtns(){
      let UserManager = JSON.parse(sessionStorage.getItem('BtnPermission'))
      for (var i = 0; i < UserManager.length; i++) {
        var name = UserManager[i];
        // console.log(name);
        switch (name) {
          case 'AddCarLibrary':
            this.AddCarLibraryBtn=true;
            break;
          case 'EditDelCarLibrary':
            this.EditDelCarLibraryBtn=true;
            break;
        }
      }
    },


    // 列表
    async getList(){
      await categoryList({
        purpose:2,
        collect:'page',
        page:this.current_page,
      }).then(res=>{
        console.log(res)
        if (res.code==10000){
          this.tableData = res.data;
          this.totalCount=res.meta.total
        }
      })
    },
    // 搜索
    search(){
      this.current_page=1
      this.getList()
    },
    // 添加
    add(){
      this.state = 'add'
      this.isShow = true
    },
    // 编辑
    edit(item){
      this.item = item
      this.state = 'edit'
      this.isShow = true
    },
    // 关闭弹窗
    closeAlert(bool){
      this.isShow = bool
      this.getList()
    },
    // 删除
    async del(item){
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await categoryDel({id:item.id}).then(res=>{
          if(res.code == 10000){
            this.$message({
              message: '删除成功',
              type: 'success'
            });
            this.getList()
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });

    },
    select(num,data){
      this.current_page = num;
      this.per_page = data;
      this.getList()
    },
    changep(num){
      this.current_page = num;
      this.getList()
    }
  }
}
</script>

<style scoped lang="scss">
.policy {
  font-size: 14px;
  padding: 0 80px;
  box-sizing: border-box;
  color: #000;
  &-header {
    margin: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .class-box {

      //float: right;
      margin-bottom: 5px;
    }
    .add-btn {
      width: 100px;
      height: 40px;
      border-radius: 5px;
      background: #1184e6;
      color: #ffffff;
      text-align: center;
      line-height: 40px;
    }
    .add-btn {
      margin-left: 80px;
    }
  }
  .list {
    margin: 30px;
    text-align: center;
  }
  .paging-device {
    margin: 30px;

  }
}

</style>
<style>
.el-table__header-wrapper{
  border-radius: 10px;
}
</style>
